import React from 'react';
import { Menu, Dropdown, Icon } from 'antd';
import styles from './index.less';

const Item = Menu.Item;

function TitleUser({
                       style = {},
                       username = '未知用户名',
                       logout = v => v,
                       changePassword = v => v,
                       updatePersonalInfo = v => v,
                   }) {
    const menu = (
        <Menu>
            <Item key="0">
                <div onClick={updatePersonalInfo}>修改个人资料</div>
            </Item>
            <Item key="1">
                <div onClick={changePassword}>修改密码</div>
            </Item>
            <Menu.Divider />
            <Item key="3">
                <div style={{ color: '#aaa' }} onClick={logout}>安全退出</div>
            </Item>
        </Menu>
    );

    return (
        <div
            style={style}
            className={styles.normal}
        >
            <Dropdown overlay={menu} trigger={['click']}>
                <a className="ant-dropdown-link">
                    {username} <Icon type="down"/>
                </a>
            </Dropdown>
        </div>
    );
}

export default TitleUser;
